<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 h-screen flex items-center justify-center">
<div class="w-full max-w-2xl bg-white p-12 rounded shadow">
    <h2 class="text-2xl font-bold mb-4 text-indigo-700 text-center">用户信息管理</h2>

    <form id="userForm" method="post" onsubmit="submitUserForm(event)" action="{% url 'user' %}" class="text-lg">
        <div class="mb-4">
            <label class="block text-gray-700 mb-1">用户名</label>
            <input type="text" name="username" class="w-full border border-gray-300 rounded px-3 py-2"
                   value="{{ username }}">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 mb-1">姓名</label>
            <input type="text" name="name" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 mb-1">邮箱</label>
            <input type="email" name="email" class="w-full border border-gray-300 rounded px-3 py-2">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 mb-1">手机号</label>
            <input type="text" name="phone" class="w-full border border-gray-300 rounded px-3 py-2"
                   pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
        </div>

        <div class="mb-4">
            <label class="block text-gray-700 mb-1">角色</label>
            <input type="text" name="role"
                   class="w-full border border-gray-300 rounded px-3 py-2 bg-gray-100 text-gray-500" value="普通用户"
                   disabled>
        </div>

        <button type="submit" class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 mx-auto block">
            保存修改
        </button>
        {% if context %}
            <p style="color:deepskyblue;">{{ context }}</p>
        {% endif %}
    </form>

    <div id="resultMsg" class="mt-4 text-green-600 hidden">修改成功！</div>
</div>
</body>
</html>
